<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem">创建</el-button>
    <div class="filter-container">
      <el-select class="filter-item" style="width: 200px;" v-model="query.queryString.warehouse_id" placeholder="选择仓库"
        clearable>
        <el-option v-for="i in warehouseList" :key="i.value" :label="i.label" :value="i.value"></el-option>
      </el-select>
      <el-select class="filter-item" style="width: 160px;" v-model="query.queryString.status" placeholder="选择状态"
        filterable clearable>
        <el-option v-for="(item,index) in statusOptions" :key="index" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
      <el-input style="width: 300px;" placeholder="输入盘点单号按回车" clearable prefix-icon="el-icon-search" class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.queryString.order_no"></el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <!--<el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出
            </el-button>-->
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key==='status'" class="text-label " :class="statusClass[v.row['status']]">
          {{status[v.row['status']]}}
        </span>
        <span v-else>{{v.row[v.key]}}</span>
      </template>
      <template v-slot:operation="v">
        <a href="#" class="text-green" @click.prevent="updateItem(v.row)">生成差异</a>&nbsp;
        <a href="#" class="text-blue" @click.prevent="goDetail(v.row,v.$index)">查看明细</a>&nbsp;
        <a href="#" class="text-red" @click.prevent="deleteItem(v.row,v.$index)">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible"></z-form-dialog>
  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  mixins: [commonMixin],
  name: 'stocktaking',
  data: function () {
    return {
      api: this.$api.stocktaking,
      name: '盘点单',
      columns: [
        { title: '盘点单号', key: 'order_no', width: 180 },
        { title: '类型', key: 'typeName', width: 60 },
        { title: '仓库', key: 'warehouse_name_code', width: 140 },
        /*{title: '盘点物料', key: 'machine_code', width: 140},*/
        { title: '盘点单说明', key: 'order_desc', width: 140 },
        { title: '状态', key: 'status', width: 90 },
        { title: '备注', key: 'remarks' },
        { title: '修改人', key: 'modify_user', width: 100 },
        { title: '最后修改', key: 'modify_time', width: 140 },
      ],
      tableProps: {
        border: true,
        opsColWith: 160,
        hideOperations: false,
      },
      fields: [
        { title: '仓库', key: 'warehouse_id', name: 'select', options: [], required: true },
        {
          title: '物料编码',
          key: 'material',
          name: 'textarea',
          props: { rows: 5, placeholder: '输入物料编码需要换行或复制EXCEL中的一列到输入框中' },
        },
        {
          title: '盘点单说明',
          key: 'order_desc',
          name: 'textarea',
          props: {},
        },
        { title: '备注', key: 'remarks', name: 'textarea' },
      ],
      query: {
        queryString: {},
        size: 10,
        page: 1,
      },
      status: { 0: '计划中', 1: '盘点中', 2: '核对中', 9: '已完成' },
      statusClass: { 0: 'bg-gray', 1: 'bg-yellow', 2: 'bg-green', 9: 'bg-blue' },
      warehouseList: [],
      tranData: { data: {}, detail: [] },
      statusOptions: [
        { value: '0', label: '计划中' },
        // { value: '1', label: '使用' },
        { value: '1', label: '盘点中' },
        { value: '2', label: '核对中' },
        { value: '9', label: '已完成' },
      ],
    }
  },
  methods: {
    materialChange() {
      this.tranData.detail = []
      if (!this.data.material) return
      let data = this.data.material.split('\n')
      _.forEach(data, (v) => {
        let tmp = _.trim(v)
        if (tmp) {
          this.tranData.detail.push(tmp)
        }
      })
    },
    goDetail(v) {
      this.$store.dispatch('delView', { name: 'wInventoryDetail' }).then((r) => {
        this.$router
          .push({
            name: 'stocktakingDiffrence',
            params: { id: v.id },
          })
          .catch(() => {})
      })
    },
    deleteItem(v) {
      this.$confirm('确定要删除这条记录？').then(() => {
        this.pageLoading = true
        let url = this.apiDelete || this.api + 'delete'
        this.$request(url + '/?id=' + v.id, {}, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.getList()
          })
          .finally(() => {
            this.pageLoading = false
          })
      })
    },
    updateItem(v) {
      if (v.status != '1') {
        this.$message({
          message: '状态为盘点中的才可生成差异',
          type: 'error',
        })
        return false
      }
      this.$confirm('确定要生成差异？', '操作确认').then(() => {
        this.pageLoading = true
        let url = this.api + 'updateDiff'
        this.$request(url + '/' + v.id, {}, 'post')
          .then((r) => {
            this.pageLoading = false
            this.$message({
              message: '操作成功',
              type: 'success',
            })
            this.getList()
          })
          .catch(() => {
            this.pageLoading = false
          })
      })
    },
    submit() {
      let insertUrl = this.apiCreate || this.api + 'add'
      let updateUrl = this.apiEdit || this.api + 'update'
      let url = this.data.id ? updateUrl : insertUrl
      let check = this.validataData(this.fields, this.data)
      if (!check) return
      let data = this.formatBeforeSave(this.data)
      this.submitLoading = true
      this.$request(url, data, 'post')
        .then((r) => {
          this.$message.success('操作成功')
          this.editFormVisible = false
          this.getList()
        })
        .finally(() => {
          this.submitLoading = false
        })
    },
    formatBeforeSave(data) {
      let datatmp = _.cloneDeep(data)
      delete datatmp['material']
      this.materialChange()
      this.tranData.data = datatmp
      return this.tranData
    },
    formatList(list) {
      //依据实际需求处理
      let tmp = _.cloneDeep(list)
      /*let tmpObj = _.keyBy(this.statusOptions, 'value')*/
      return tmp.map((i) => {
        i.warehouse_name_code = i.warehouse_code + ' ' + i.warehouse_name
        return i
      })
      return tmp
    },
  },
  created: function () {
    this.$request(this.$api.warehouse + 'getlist', {
      size: 9999,
      page: 1,
    })
      .then((r) => {
        this.warehouseList = this.arrayOptions(r.list, 'id', ['warehouse_code', 'warehouse_name'])
        this.setFieldOptions('warehouse_id', r.list, 'id', ['warehouse_code', 'warehouse_name'])
      })
      .catch(() => {})
    this.getList()
  },
}
</script>
<style scoped>
</style>
